<!--<template>-->
<!--  <h1>EL-表单组件</h1>-->
<!--  <el-form style="width: 500px;margin: 0 auto" label-width="80px">-->
<!--    <el-form-item label="用户名">-->
<!--      <el-input placeholder="请输入用户名" v-model="username"></el-input>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="密码">-->
<!--      <el-input placeholder="请输入密码" v-model="password"></el-input>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="性别">-->
<!--      <el-radio-group v-model="gender">-->
<!--        <el-radio label="男" value="1"></el-radio>-->
<!--        <el-radio label="女" value="0"></el-radio>-->
<!--      </el-radio-group>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="所在地">-->
<!--      <el-select placeholder="请选择" v-model="city">-->
<!--        <el-option v-for="item in arrCity" :label="item.city" :value="item.value"></el-option>-->
<!--      </el-select>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="管理员">-->
<!--      <el-switch :active-value="value1" :inactive-value="value2" v-model="valueOf" style="&#45;&#45;el-switch-on-color: #13ce66"></el-switch>-->
<!--    </el-form-item>-->
<!--    <el-form-item>-->
<!--      <el-button type="primary" @click="personOf">提交</el-button>-->
<!--    </el-form-item>-->
<!--  </el-form>-->
<!--</template>-->


<!--<script setup>-->
<!--import {ref} from "vue";-->
<!--const username = ref('')-->
<!--const password = ref('')-->
<!--const gender = ref('')-->
<!--const city = ref('')-->
<!--const valueOf = ref('')-->
<!--const value1 = ref(0)-->
<!--const value2 = ref(1)-->
<!--const arrCity = ref([-->
<!--    {city: '北京', value: 'beijing'},-->
<!--    {city: '上海', value: 'shanghai'},-->
<!--    {city: '广州', value: 'guangzhou'},-->
<!--    {city: '深圳', value: 'shenzhen'},-->
<!--    {city: '杭州', value: 'hangzhou'},-->
<!--    {city: '南京', value: 'nanjing'},-->
<!--    {city: '苏州', value: 'suzhou'},-->
<!--    {city: '西安', value: 'xian'},-->
<!--    {city: '武汉', value: 'wuhan'},-->
<!--    {city: '成都', value: 'chengdu'},-->
<!--    {city: '天津', value: 'tianjin'},-->
<!--    {city: '重庆', value: 'chongqing'},-->
<!--    {city: '厦门', value: 'xiamen'},-->
<!--    {city: '福州', value: 'fuzhou'},-->
<!--    {city: '青岛', value: 'qingdao'},-->
<!--    {city: '大连', value: 'dalian'},-->
<!--    {city: '沈阳', value: 'shenyang'},-->
<!--    {city: '长春', value: 'changchun'},-->
<!--    {city: '哈尔滨', value: 'haerbin'},-->
<!--    {city: '郑州', value: 'zhengzhou'},-->
<!--    {city: '太原', value: 'taiyuan'},-->
<!--])-->

<!--const person = ref({-->
<!--  username: '',-->
<!--  password: '',-->
<!--  gender: '',-->
<!--  location: '',-->
<!--  identity: '',-->
<!--})-->
<!--const personOf = () => {-->
<!--      username.value,-->
<!--      password.value,-->
<!--      gender.value,-->
<!--      arrCity.value[city.value],-->
<!--      valueOf.value,-->
<!--  console.log(person.value)-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->

<template>
  <h1>EL-表单组件</h1>
  <el-form style="width: 500px;margin: 0 auto" label-width="80px">
    <el-form-item label="用户名">
      <el-input placeholder="请输入用户名" v-model="username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input placeholder="请输入密码" v-model="password" type="password"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="gender">
        <el-radio label="男" value="1"></el-radio>
        <el-radio label="女" value="0"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="所在地">
      <el-select placeholder="请选择" v-model="city">
        <el-option v-for="item in arrCity" :key="item.value" :label="item.city" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="管理员">
      <el-switch
          :active-value="value1"
          :inactive-value="value2"
          v-model="valueOf"
          style="--el-switch-on-color: #13ce66"
      ></el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="personOf">提交</el-button>
      <el-button @click="clearForm" style="margin-left: 10px">重置</el-button>
    </el-form-item>
  </el-form>

  <!-- 已提交记录展示区域 -->
  <div style="width: 500px; margin: 20px auto;">
    <h3>已提交记录 ({{ records.length }})</h3>
    <el-divider></el-divider>
    <el-table :data="records" border style="width: 100%">
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="location" label="所在地"></el-table-column>
      <el-table-column prop="identity" label="身份"></el-table-column>
      <el-table-column prop="submitTime" label="提交时间" width="180"></el-table-column>
    </el-table>
  </div>
  <hr>
  <p v-if="isShow">段落1</p>
  <p v-show="isShow">段落2</p>
  <el-button @click="changeStatus">点我隐藏</el-button>
  <hr>
  <el-input placeholder="请输入图片URL" v-model="imgUrl"></el-input>
  <el-image :src="imgUrl"></el-image>
  <hr>
  <ul>
    <li v-for="item in proArr">{{item}}</li>
    <el-button ></el-button>
  </ul>

</template>


<script setup>
import {ref} from "vue";
// 1. 创建一个按钮点击按钮可以切换p标签的显示状态,要求使用 v-if 控制第一个段落是否渲染,用 v-show 控制第二个段落的可见性
const isShow = ref(true);
const changeStatus = () => {
  isShow.value = !isShow.value;
};
// 2. 创建一个动态图片展示组件,包含一个输入框,当用户输入图片URL后,下方的 <img> 元素将动态绑定并显示该图片
const imgUrl = ref('');
// 3. 定义一个包含至少5个商品名称的数组,利用 v-for 将其渲染为无序列表,并为每个商品添加删除功能
const proArr = ref(['香蕉', '苹果', '橘子', '西瓜', '苹果'])
const deleteItem = (index) => {
  proArr.value.splice(index,1)
}

import {ElMessage} from 'element-plus'; // 引入消息提示组件

// 表单数据
const username = ref('')
const password = ref('')
const gender = ref('')
const city = ref('')
const valueOf = ref('')
const value1 = ref(0)  // 开启状态值(管理员)
const value2 = ref(1)  // 关闭状态值(普通用户)

// 城市数据
const arrCity = ref([
  {city: '北京', value: 'beijing'},
  {city: '上海', value: 'shanghai'},
  {city: '广州', value: 'guangzhou'},
  {city: '深圳', value: 'shenzhen'},
  {city: '杭州', value: 'hangzhou'},
  {city: '南京', value: 'nanjing'},
  {city: '苏州', value: 'suzhou'},
  {city: '西安', value: 'xian'},
  {city: '武汉', value: 'wuhan'},
  {city: '成都', value: 'chengdu'},
  {city: '天津', value: 'tianjin'},
  {city: '重庆', value: 'chongqing'},
  {city: '厦门', value: 'xiamen'},
  {city: '福州', value: 'fuzhou'},
  {city: '青岛', value: 'qingdao'},
  {city: '大连', value: 'dalian'},
  {city: '沈阳', value: 'shenyang'},
  {city: '长春', value: 'changchun'},
  {city: '哈尔滨', value: 'haerbin'},
  {city: '郑州', value: 'zhengzhou'},
  {city: '太原', value: 'taiyuan'},
])

// 用于存储所有提交记录的数组
const records = ref([])

// 提交表单处理函数
const personOf = () => {
  // 简单的表单验证
  if (!username.value) {
    ElMessage.warning('请输入用户名');
    return;
  }

  if (!password.value) {
    ElMessage.warning('请输入密码');
    return;
  }

  if (!gender.value) {
    ElMessage.warning('请选择性别');
    return;
  }

  if (!city.value) {
    ElMessage.warning('请选择所在地');
    return;
  }

  // 查找选中的城市名称
  const selectedCity = arrCity.value.find(item => item.value === city.value)

  // 整理表单数据为对象
  const formData = {
    username: username.value,
    password: password.value,
    gender: gender.value === '1' ? '男' : '女',
    location: selectedCity ? selectedCity.city : '',
    identity: valueOf.value === value1.value ? '管理员' : '普通用户',
    submitTime: new Date().toLocaleString()
  }

  // 将新记录添加到数组
  records.value.push(formData)

  // 显示提交成功提示
  ElMessage.success('提交成功！');

  // 打印当前所有记录
  console.log('所有提交记录:', records.value)

  // 提交后清空表单
  clearForm()
}

// 清空表单函数
const clearForm = () => {
  username.value = ''
  password.value = ''
  gender.value = ''
  city.value = ''
  valueOf.value = ''
}
</script>

<style scoped>
h1 {
  text-align: center;
  margin: 20px 0;
}
</style>
